<script type="text/javascript" src="{{ MEDIA_URL }}realinplaceedit/js/jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen,projection" href="{{ MEDIA_URL }}realinplaceedit/css/realinplaceedit.css" />
<script type="text/javascript">
    var $j = jQuery.noConflict();
    var realedit_containers_original = {};
    (function($){
	$(document).ready(function () {
	    // Put the editable content to the containers
	    var containers = {{ containers|safe }};
	    for (i=0; i< containers.length; i++)
	    {
		var container_id = containers[i].id_html;
		containers_id = $j(container_id);
		
		if (container_id.indexOf("#")!=-1) //Un solo elemento
		{
		   set_event(containers_id);
		}
		else{ //muchos elementos
		    for(j=0; j<containers_id[0].length;j++)
		    {
			if(containers_id[0][j].id){
			    set_event($j("#"+containers_id[0][j].id));
			}
		    }
		}
	    }

	    //Here put the code for the changes
	    var changes = {{ changes|safe }};
	    for (i=0; i< changes.length; i++)
	    {
		$j(changes[i].container_user.container.id_html)[0].innerHTML+="change";
	    }
	});
    })(jQuery);
// $(document).createElement("div")
    function set_event(jquery_id)
    {
	jquery_id.addClass("real_container");
	jquery_id.dblclick(function (){    
	    jquery_id[0].contentEditable="true";
	    jquery_id.removeClass("real_container");
	    jquery_id.addClass("edit_container");
	    save_html(jquery_id[0]);
	    create_buttons(jquery_id);
	});

    }
    function save_html(jquery_id)
    {
	realedit_containers_original[jquery_id.id] = jquery_id.inspect() + jquery_id.innerHTML + "</" + jquery_id.tagName +">";

    }
    function create_buttons(jquery_id)
    {
	var div_button = $(document).createElement("div");
	div_button.id = "div_button_"+ jquery_id[0].id;
	jquery_id.append(div_button);
	var div_button_jquery = $j("#"+div_button.id);
	div_button_jquery.insertAfter(jquery_id);
	div_button_jquery.addClass("real_buttons");
	
	var a_ok_button = $(document).createElement("a");
	a_ok_button.id = "a_ok_button_" + jquery_id[0].id;
	a_ok_button.innerHTML = "edit";
	a_ok_button.href="#";

	var a_cancel_button = $(document).createElement("a");
	a_cancel_button.id = "a_cancel_button" + jquery_id[0].id;
	a_cancel_button.innerHTML = "cancel";
	a_cancel_button.href="#";

	var a_reset_button = $(document).createElement("a");
	a_reset_button.id = "a_reset_button" + jquery_id[0].id;
	a_reset_button.innerHTML = "reset";
	a_reset_button.href="#";


	div_button_jquery.append(a_ok_button);
	div_button_jquery.append(a_cancel_button);
	div_button_jquery.append(a_reset_button);
	
	$j("#"+a_ok_button.id ).click(function (){ 
	    alert("HOLAAA"+this.id);
	});
	$j("#"+a_cancel_button.id ).click(function (){ 
	    alert("HOLAAA222"+this.id);
	});

	$j("#"+a_reset_button.id ).click(function (){ 
	    alert("HOLAAA2223"+this.id);
	});
    }

//     var changes = {{ changes|safe }};
//     for (i=0; i< changes.length; i++)
//     {
// 	document.getElementById(changes[i].container_user.container.id_html).contentEditable="true";
//     }
   
</script>